{% extends '../csdn_django/csdn_model.html' %}
{% load static %}
{% block title %}
    {{ query }}-CSDN搜索
{% endblock %}
{% block style %}
    <link rel="stylesheet" href="/static/css/search_header.css">
    <link rel="stylesheet" href="/static/css/search-content.css">
    <link rel="stylesheet" href="{% static '/plugins/bootstrap-3.4.1/css/bootstrap.css' %}">
{% endblock %}
{% block header %}
    <div class="csdn-header-box">
        <div class="csdn-header">
            <div class="header-left">
                <div class="header-left-logo">
                    <a href="{% url 'csdn' %}">
                        <img src="{% static 'image/csdn/csdn.png' %}">
                    </a>
                </div>
                <ul class="header-left-menus">
                    <li>
                        <a>
                            博客
                        </a>
                    </li>
                    <li>
                        <a>
                            下载
                        </a>
                    </li>
                    <li>
                        <a>
                            学习
                        </a>
                    </li>
                    <li>
                        <a>
                            社区
                        </a>
                    </li>
                    <li>
                        <a>
                            会议
                        </a>
                    </li>
                </ul>
            </div>
            <div class="header-middle"></div>
            <div class="header-right"></div>
        </div>
    </div>
{% endblock %}

{% block content %}
    <div class="so-list-detail">
        <div class="search-box">
            <div class="search">
                <div class="main-search">
                    <div class="search-box-input">
                        <input type="text" id="keyword" maxlength="255" >
                        <button id="search"></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-content">
            <div class="content">
                <div class="blog-content">
                    <div class="main-lt">
                        
                    </div>
                    <div class="main-rt"></div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block js %}
    <script src="{% static 'plugins/jQuery/jquery-3.7.1.min.js' %}"></script>
    <script type="text/javascript">
        $(function () {
            console.log("加载完成")
            // 先通过点击跳转到搜索页面然后
            // 通过ajax请求数据
            // 当搜索页面一加载完成就会进行这个请求
            var btn = $('.search');
            btn.on('click', function () {
                $.ajax(
                    {
                        url: '{% url "v1" %}',
                        type: 'get',
                        dataType: 'json',
                        data: {
                            q: $('#search').val()
                        },
                        success: function (res) {
                            console.log(res);
                        },
                    }
                )
                
            })
        })
        $('.search-box-input input').on('click', function () {
            $(this).css('border', '1px solid rgb(254, 107, 0)');
        }).on('blur', function () {
            $(this).css('border', '1px solid #ccc'); // 恢复默认边框样式
        });
    </script>
{% endblock %}